<template>
  <div>
    <div class="search-box">
      <x-input
        v-model="groupValue"
        :show-clear="true"
        :placeholder="$t('notice.plsInput')"
        @on-change="searchGroup"
      />
    </div>

    <div v-for="(item, index) in groupList" :key="index" class="group-box">
      <img
        :src="item.portraitUrl"
        :onerror="errorDefaultImg"
        class="personal-img"
      />
      <div class="personal-name">{{ item.name }}</div>
      <div class="icon" @click="addGroup(item)">
        <x-icon v-show="isSelectGroup(item)" type="ios-checkmark" size="24" />
        <x-icon
          v-show="!isSelectGroup(item)"
          type="ios-circle-outline"
          size="24"
        />
      </div>

      <div class="clearfix" />
    </div>
  </div>
</template>

<script>
import { XInput, Toast } from 'vux';
import { getUserGroups } from '@/api/edit-notice';

export default {
  name: 'Group',
  components: {
    XInput,
    Toast,
  },
  data() {
    return {
      groupValue: '',
      groupList: [],
      selectedGroups: [], // 存储选中的群组
      originSearchGroupList: [], // 存储原数据
      errorDefaultImg: `this.src="${require('@/assets/notice/defaultGroup.png')}"`,
    };
  },
  created() {
    this.getGroupFromJssdk();
  },
  methods: {
    // 获取群组列表
    async getGroupList() {
      this.groupList = [];
      const result = await getUserGroups();
      if (result.length) {
        this.groupList = result.data;
        this.originSearchGroupList = result.data;
        this.groupList.forEach((item) => {
          item.portraitUrl = item.portraitUrl || '';
        });
      }
    },
    // FIXME(ZK) 目前从 jssdk 获取群组列表，应该是后端获取，但是后端 ddio 接口获取
    // 到的数据有问题，已经退出的群组仍然可以获取到，需要等待 ddio 服务端解决
    getGroupFromJssdk() {
      this.groupList = [];
      vrv.jssdk.getGroupList({
        success: res => {
          res.groupsInfo.forEach(item => {
            this.groupList.push({
              name: item.groupName,
              id: item.groupID,
              portraitUrl: item.groupPortraitURL ? item.groupPortraitURL : '',
            });
          });
        },
      });
    },
    // 添加群组
    addGroup(item) {
      for (let i = 0; i < this.selectedGroups.length; i++) {
        if (item.id === this.selectedGroups[i].id) {
          this.selectedGroups.splice(i, 1);
          return;
        }
      }
      this.selectedGroups.push(item);
      this.$emit('getSelectGroups', this.selectedGroups);
    },
    // 是否选中联系人
    isSelectGroup(item) {
      for (let i = 0; i < this.selectedGroups.length; i++) {
        if (item.id === this.selectedGroups[i].id) {
          return true;
        }
      }
      return false;
    },
    // 搜索群组
    searchGroup() {
      if (this.groupValue) {
        const list = [];
        this.groupList.forEach((item) => {
          if (item.name.indexOf(this.groupValue) > -1) {
            list.push(item);
          }
        });
        this.groupList = list;
      } else {
        this.groupList = this.originSearchGroupList;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../common/css/address-book.less';
</style>
